<template>
  <div class="app-container">
    <div class="demo-header">
      <h1>ProductPageGenerator 组件演示</h1>
      <p>这是一个演示如何使用ProductPageGenerator组件的页面</p>
    </div>

    <el-card class="demo-card">
      <div slot="header" class="card-header">
        <span>基本使用示例</span>
      </div>

      <div class="demo-section">
        <h3>示例1：基本使用</h3>
        <p>最简单的使用方式，只传入必要的参数：</p>
        <div class="demo-example">
          <ProductPageGenerator
            :images="demoImages1"
            :product-name="demoProduct1"
            @generated="handleResult1"
          />
        </div>
        <div class="demo-code">
          <pre><code>&lt;ProductPageGenerator
  :images="['https://example.com/image1.jpg']"
  product-name="定制T恤"
  @generated="handleResult"
/&gt;</code></pre>
        </div>
      </div>

      <div class="demo-section">
        <h3>示例2：完整配置</h3>
        <p>使用所有可配置参数，AI引擎列表从后台动态获取：</p>
        <div class="demo-example">
          <ProductPageGenerator
            :images="demoImages2"
            :product-name="demoProduct2"
            button-text="AI智能生成"
            button-type="success"
            button-size="medium"
            button-icon="el-icon-cpu"
            :show-engine-selector="true"
            default-engine="default"
            @generated="handleResult2"
          />
        </div>
        <div class="demo-code">
          <pre><code>&lt;ProductPageGenerator
  :images="productImages"
  product-name="高端定制服装"
  button-text="AI智能生成"
  button-type="success"
  button-size="medium"
  button-icon="el-icon-cpu"
  :show-engine-selector="true"
  default-engine="gpt-4"
  @generated="handleResult"
/&gt;</code></pre>
        </div>
      </div>

      <div class="demo-section">
        <h3>示例3：多图片产品</h3>
        <p>传入多张产品图片：</p>
        <div class="demo-example">
          <ProductPageGenerator
            :images="demoImages3"
            :product-name="demoProduct3"
            button-text="生成多图网页"
            button-type="warning"
            @generated="handleResult3"
          />
        </div>
      </div>
    </el-card>

    <el-card class="demo-card">
      <div slot="header" class="card-header">
        <span>生成结果展示</span>
      </div>

      <div class="results-section">
        <h3>最近生成结果：</h3>
        <div v-if="results.length === 0" class="no-results">
          暂无生成结果，请点击上方按钮测试生成功能
        </div>
        <div v-else>
          <div v-for="(result, index) in results" :key="index" class="result-item">
            <div class="result-header">
              <span class="result-title">{{ result.title }}</span>
              <span class="result-time">{{ result.time }}</span>
            </div>
            <div class="result-content">
              <pre>{{ result.content }}</pre>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import ProductPageGenerator from '@/components/ProductPageGenerator'

export default {
  name: 'ProductPageGeneratorDemo',
  components: {
    ProductPageGenerator
  },
  data() {
    return {
      // 示例数据
      demoImages1: [
        'https://via.placeholder.com/400x300/409EFF/ffffff?text=定制T恤正面'
      ],
      demoProduct1: '定制T恤',

      demoImages2: [
        'https://via.placeholder.com/400x300/67C23A/ffffff?text=高端服装1',
        'https://via.placeholder.com/400x300/E6A23C/ffffff?text=高端服装2'
      ],
      demoProduct2: '高端定制服装',

      demoImages3: [
        'https://via.placeholder.com/300x300/F56C6C/ffffff?text=鞋子1',
        'https://via.placeholder.com/300x300/909399/ffffff?text=鞋子2',
        'https://via.placeholder.com/300x300/303133/ffffff?text=鞋子3',
        'https://via.placeholder.com/300x300/606266/ffffff?text=鞋子4'
      ],
      demoProduct3: '运动鞋系列',

      // 结果存储
      results: []
    }
  },
  methods: {
    handleResult1(result) {
      this.addResult('基本使用示例', result)
    },
    handleResult2(result) {
      this.addResult('完整配置示例', result)
    },
    handleResult3(result) {
      this.addResult('多图片产品示例', result)
    },
    addResult(title, content) {
      this.results.unshift({
        title: title,
        content: typeof content === 'string' ? content : JSON.stringify(content, null, 2),
        time: new Date().toLocaleString()
      })

      // 只保留最近5个结果
      if (this.results.length > 5) {
        this.results = this.results.slice(0, 5)
      }

      this.$message.success(`${title} - 生成完成`)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
}

.demo-header h1 {
  color: #303133;
  margin-bottom: 10px;
}

.demo-header p {
  color: #606266;
  font-size: 14px;
}

.demo-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  color: #303133;
}

.demo-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.demo-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.demo-section h3 {
  margin-bottom: 10px;
  color: #409EFF;
}

.demo-section p {
  margin-bottom: 15px;
  color: #606266;
  font-size: 14px;
}

.demo-example {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #F5F7FA;
  border-radius: 4px;
}

.demo-code {
  background-color: #2D3748;
  border-radius: 4px;
  padding: 15px;
  overflow-x: auto;
}

.demo-code pre {
  margin: 0;
  color: #E2E8F0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.results-section h3 {
  margin-bottom: 15px;
  color: #409EFF;
}

.no-results {
  text-align: center;
  color: #909399;
  padding: 30px;
  background-color: #F5F7FA;
  border-radius: 4px;
}

.result-item {
  margin-bottom: 15px;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  overflow: hidden;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #F5F7FA;
  border-bottom: 1px solid #EBEEF5;
}

.result-title {
  font-weight: bold;
  color: #303133;
}

.result-time {
  font-size: 12px;
  color: #909399;
}

.result-content {
  padding: 15px;
  max-height: 200px;
  overflow-y: auto;
}

.result-content pre {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
